﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
    <title></title>
    <script src="layer.min.js" type="text/javascript"></script>
    <link href="layer.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var p = { name: "张三", shade: { show: false, width: 0, height: 20} };
        function show() {
            //            new layer({ title: "提示" }).alert("这是一个alert弹出框,哈哈哈哈哈哈", 6, function (data) {
            //                alert("你点击了确定哈，返回值：" + data);
            //            });
            //            var n = { shade: { width: 20} };
            //            fuzhi(n);
            var t = layer.alert("这是一个alert弹出框,哈哈哈哈哈哈", 6, function (data) {
                alert("你点击了确定哈，返回值：" + data);
            });
        }
        function fuzhi(parsm) {
            parsm.EvUpdate(p);
            alert(p.shade.width);
        }
        function show2() {
            new layer({ title: "提示", border: { show: false, color: "#000000", width: 10, rgba: 0.5} }).alert("<a href=\"http://www.baidu.com\">我自定义了边框</a>", 2);
        }
        function show3() {
            new layer({ title: "自定义弹出层位置", offset: { left: 0, top: 0 }, border: { show: true, color: "#4CB649", width: 10, rgba: 0.5} }).alert("我自定义了边框", 2);
        }
        function show4() {
            new layer({ title: "提示框演示" }).confirm("是否删除订单？", 8, function (data) {
                alert("你点击了确定，返回值：" + data);
            });
        }
        function show5() {
            new layer({ title: "自定义按钮", border: { width: 10 }, btns: { btn: ["必须删除", "不准删除？"], count: 2} }).confirm("是否删除订单？", 8, function (data) {
                alert("你点击了必须删除，你太硬了！");
            });
        }
        function page0() {
            layer.page({ title: "这是一个页面层", page: { html: "<h1>传入了html代码</h1>"} });
        }
        function page1() {
            layer.page({ title: "这是一个页面层", page: {
                html: "<h1>这是无头部与底部的页面，传入的为html代码,是不是头疼无法关闭了，别怕，5秒后自动关闭</h1>" + document.getElementById("pageDIV").innerHTML
            }, oframe: { head: false }, timeout: 5, border: { width: 10 }
        });
    }
    function iframe0() {
        layer.win("回调函数的演示", "callback.htm", function (data) {
            document.getElementById("callBox").value += data + "\r\n";
        })
    }
    </script>
</head>
<body>
    <input type="button" onclick="show()" value="基本弹出" />
    <input type="button" onclick="show2()" value="自定义边框" />
    <input type="button" onclick="show3()" value="自定义边框，左上弹出" />
    <br />
    <br />
    <input type="button" onclick="show4()" value="询问框" />
    <input type="button" onclick="show5()" value="询问框-自定义按钮" />
    <br />
    <br />
    <input type="button" onclick="page0()" value="页面层，默认无底部" />
    <input type="button" onclick="page1()" value="页面层,去掉顶部" />
    <br />
    <br />
     <input type="button" onclick="iframe0()" value="iframe层，默认无底部" />
     <textarea id="callBox" style="height:200px"></textarea>
    <br />
    <br />
    layer1.0纯js版.寒飞哥<br />
    <h1>
        参数列表</h1>
    <div id="pageDIV">
    <table border="1">
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                <strong>属性</strong>
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                type
            </td>
            <td>
                &nbsp; 0表示alert,1表示confirm，暂时扩展2种&nbsp;
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                oclass
            </td>
            <td>
                定义了layer 所触发事件的样式，可以配合完全自定义样式使用，包含了关闭按钮，询问框确定，取消按钮<br />
                等的样式，如：{oclass:{closebtn:&quot;xxxx&quot;}},那么当点击在layer下包含xxxx的元素时，会触发关闭事件。<br />
                此属性配合layerdemo可以做到完全自定义layer
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                title
            </td>
            <td>
                layer标题，没啥好说的
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                maxmin
            </td>
            <td>
                是否显示放大、缩小、还原按钮(未实现)
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                offset
            </td>
            <td>
                弹出层相对于左上角的位置 {left,top}
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                area
            </td>
            <td>
                width,height&nbsp;&nbsp;&nbsp; layer的大小，没啥好说的。
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                border
            </td>
            <td>
                { show: true, width: 1, color: &quot;#000000&quot;, rgba: 0.4 }&nbsp; 是否显示边框，边框宽度，边框颜色，边框透明度<br />
                此属性可以演变各式各样风格的layer.
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                shade
            </td>
            <td>
                { show: true, color: &quot;#000000&quot;, rgba: 0.3, clickClose: false } 遮罩层。属性和上面差不多,cliclClose<br />
                表示点击遮罩层区域，是否关闭layer,默认不启用
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                closeBtn
            </td>
            <td>
                { show: true, icon: null } 是否显示关闭按钮，icon，按钮图标(未实现)
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                timeout
            </td>
            <td>
                0&nbsp;&nbsp; 自动关闭(秒)，0则不自动关闭。&nbsp;&nbsp; 0.5 代表500毫秒后自动关闭
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                fix
            </td>
            <td>
                true&nbsp; 是否随鼠标滚动而滚动。
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                move
            </td>
            <td>
                move: { ismove: true, out: false, obj: null, type: 0 }&nbsp; layer拖动方式(实现拖动)
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                bgcolor
            </td>
            <td>
                背景色
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                zIndex
            </td>
            <td>
                层的层级关系
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                maxWidth
            </td>
            <td>
                最大宽度
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                btns
            </td>
            <td>
                { btn: [&quot;确定&quot;, &quot;取消&quot;], count: 0 }&nbsp;&nbsp; alert 强制count为1&nbsp;
                confirm为0
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                dialog
            </td>
            <td>
                { icon: null, msg: &quot;&quot;, success: null }&nbsp; msg 为alert 与 confirm 显示的消息,sucess
                为回调函数,icon<br />
                图标，目前有几种，忘记了，下一步支持自传
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                <strong>方法</strong>
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                alert
            </td>
            <td>
                &nbsp;用法1、： new layer({..参数}).alert(msg,icon,callback)&nbsp;<br />
                &nbsp; 用法2、：layer.alert(msg,icon,callback)
            </td>
        </tr>
        <tr>
            <td style="width: 90px; text-align: right; padding-right: 15px">
                confirm
            </td>
            <td>
                &nbsp; 用法同上，(等改进)&nbsp;
            </td>
        </tr>
    </table>
    </div>
</body>
</html>
